<template>
    <view>
        <div class='input_box'>
            <div class='form_input account_input'
                 :class="[{ activeInput : focusIndex == currentIndex, 'fail':inputFail }]">
                <input v-if="inputType == 'number'"
                       class="input"
                       type='number'
                       @focus='focusIndex = currentIndex'
                       @blur='focusIndex = -1'
                       v-model="inputValue"
                       :placeholder="placeholderText"
                       placeholder-class="placeholder_class">
                <input v-if="inputType == 'text'"
                       class="input"
                       type='text'
                       @focus='focusIndex = currentIndex'
                       @blur='focusIndex = -1'
                       v-model="inputValue"
                       :placeholder="placeholderText"
                       placeholder-class="placeholder_class">
                <input v-if="inputType == 'password'"
                       class="input"
                       type='password'
                       @focus='focusIndex = currentIndex'
                       @blur='focusIndex = -1'
                       v-model="inputValue"
                       :placeholder="placeholderText"
                       placeholder-class="placeholder_class">
                <div class='right_label'
                     :class="{'showyanjing': focusIndex == currentIndex || inputValue.length > 0 || inputValue > 0 }"
                     @click='iconClick'>
                    <view v-if="showIcon">
                        <span class='iconfont'
                              :class="icon"></span>
                    </view>
                    <view v-else>
                        <span>{{ rightText }}</span>
                    </view>
                </div>
            </div>
        </div>
    </view>
</template>
<script>
export default {
    props: ['value', 'currentIndex',
        'placeholderText', 'rightText',
        'inputType', 'showIcon', 'icon',
        'inputFail'],
    data() {
        return {
            focusIndex: -1,
            inputValue: '',
        }
    },
    watch: {
        value: {
            immediate: true,
            handler: function (val) {
                if (!isNaN(val)) this.inputValue = val
            }
        },
        inputValue(val) {
            if (this.inputType == 'number') val = parseInt(val)
            this.$emit('input', val);
        }
    },
    methods: {
        iconClick() {
            if (this.showIcon) {
                if (this.icon == 'icon-guanbi') {
                    this.$emit('cleacInput');
                } else if (this.icon == 'icon-yanjing-zheng' || this.icon == 'icon-yanjing_bi') {
                    this.$emit('switchShowPwd');
                }
            }
        },
    }
}
</script>
<style lang="scss" scoped>
@import "@/common/scss/common.scss";

.input_box {
    height: 130upx;
    margin-bottom: 20upx;
    .form_input {
        height: 80%;
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        border: 0;
        border-bottom: 2upx solid #e9eaf0;
        padding: 0upx 2upx;
        transition: border 0.2s;
        background-color: #fff;
        &.activeInput {
            border-color: lighten($primarycolor, 10%);
        }
        &.fail {
            border-color: red;
        }
        .input {
            flex: 1;
            padding-right: 2upx;
            box-sizing: border-box;
            height: 90upx;
            line-height: 90upx;
            color: #56546c;
            font-weight: 700;
            font-size: 44upx;
        }
        .left_label,
        .right_label {
            padding-left: 20upx;
            display: inline-block;
            height: 60upx;
            border-radius: 28upx;
            line-height: 60upx;
            text-align: center;
            transform: scale(0);
            transition: all 0.3s;
            opacity: 0;
            span {
                font-size: 40upx;
                color: rgb(95, 95, 95);
            }
            i {
                font-size: 40upx;
                color: #000;
            }
            .icon-yanjing-zheng {
                color: $primarycolor;
            }
            .icon-yanjing_bi {
                color: #c1c1c1;
            }
            &.showyanjing {
                opacity: 1;
                transform: scale(1);
            }
            &.show_icon {
                opacity: 1;
                width: 40upx;
                transform: scale(1);
            }
        }
        .left_label {
            width: 0;
        }
    }
    .placeholder_class {
        color: #c6c6c6;
        font-weight: normal;
        font-size: 32upx;
    }
}
</style>